<template>
    <div>
        <div class="search-div">
            <el-form label-width="100px" label-position="right">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="订单编号：">
                            <el-input v-model="query.orderCode" size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="收件人：">
                            <el-input v-model="query.receiverName" size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="联系电话：">
                            <el-input v-model="query.tel" size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <div style="padding-top:7px">
                            <el-button type="primary" @click="queryBtn" size="mini">查询</el-button>
                            <el-button @click="reset" size="mini">重置</el-button>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6">
                        <el-form-item label="支付状态：">
                            <el-select v-model="query.payStatus" placeholder="请选择支付状态" size="mini">
                                <el-option label="支付中" value="0"></el-option>
                                <el-option label="支付成功" value="1"></el-option>
                                <el-option label="支付失败" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="订单状态：">
                            <el-select v-model="query.orderStatus" placeholder="请选择订单状态" size="mini">
                                <el-option label="未发货" value="0"></el-option>
                                <el-option label="已发货" value="1"></el-option>
                                <el-option label="已签收" value="2"></el-option>
                                <el-option label="已退货" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="购买时间：">
                            <el-date-picker
                                size="mini"
                                v-model="query.daterangeArr"
                                value-format="yyyy/MM/dd hh:mm:ss"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!--数据列表-->
        <div>
            <el-table
            :data="page.list"
            border
            :row-style="{height:'28px'}"
            :cell-style="{padding:'5px'}"
            style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <div v-for="(item,index) in props.row.orderDetails">
                                <el-form-item label="商品ID：">
                                    <span>{{ item.productId }}</span>
                                </el-form-item>
                                <el-form-item label="商品名称：">
                                    <span>{{ item.productName }}</span>
                                </el-form-item>
                                <el-form-item label="购买数量：">
                                    <span>{{ item.buyNumber }}</span>
                                </el-form-item>
                                <el-form-item label="商品单价：">
                                    <span>{{ item.price }}</span>
                                </el-form-item>
                                <el-form-item label="商品尺寸：">
                                    <span>{{ item.productSize }}</span>
                                </el-form-item>
                                <br>
                            </div>
                            <el-form-item label="收货地址：">
                                <span>{{ props.row.address }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>

                <template v-for="(item,index) in columns">
                    <el-table-column
                        :prop="item.property"
                        :label="item.lable"
                        :width="item.width"
                        :formatter="item.formatter">
                    </el-table-column>
                </template>
                
                <el-table-column
                    label="操作"
                    fixed="right"
                    width="100px">
                    <template slot-scope="scope">
                    <el-button @click="deliverGoods(scope.row)" type="text" size="small">发货</el-button>
                    </template>
                </el-table-column>
            </el-table> 
            <!--分页组件-->
            <div style="padding:20px;">
                <el-pagination
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.current"
                :page-sizes="pageSizes"
                :page-size="query.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { queryOrderPage, orderDeliverGoods } from '@/server/index.js'
export default {
    components: {},
    data() {
    //这里存放数据
    return {
        query:{
            current:1,
            size:10,
            orderCode:'',
            receiverName:'',
            receiverTel:'',
            payStatus:'',
            orderStatus:'',
            daterangeArr:[]
        },
        page:{
            pageSize:10,
            pageNo:1,
            count:0,
            list:[]
        },
        pageSizes:[5,10,15,30,50],
        columns:[
              {
                property:"orderCode",
                lable:"订单号",
                width:"180",
              },
              {
                property:"buyTime",
                lable:"购买时间",
                width:"200"
              },
              {
                property:"paySumMoney",
                lable:"支付金额",
                width:"150"
              },
              {
                property:"payStatus",
                lable:"支付状态",
                width:"100",
                formatter:(row)=>{
                    if(row.payStatus == 1){
                        return "支付成功"
                    }else if (row.payStatus == 0){
                        return "支付中"
                    }else{
                        return "支付失败"
                    }   
                }
              },
              {
                property:"productSumNumber",
                lable:"购买总数量",
                width:"150"
              },
              {
                property:"orderStatus",
                lable:"订单状态",
                width:"100",
                formatter:(row)=>{
                    if(row.orderStatus == 0){
                        return "未发货"
                    }else if (row.orderStatus == 1){
                        return "已发货"
                    }else if(row.orderStatus == 2){
                        return "已签收"
                    }else{
                        return "已退货"
                    }   
                }
              },
              {
                property:"receiverName",
                lable:"收件人",
                width:"100"
              },
              {
                property:"receiverTel",
                lable:"联系电话",
                width:"150"
              },
               {
                property:"remark",
                lable:"备注",
                width:"300"
              },
         ],
    };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        queryBtn(){
            this.queryPage();
        },
        handleSizeChange (pageSize) {
          // 改变数据条数
          this.query.size = pageSize;
          this.query.current = 1;
          this.queryPage();
        },
        handleCurrentChange (pageNo) {
            // 改变页数
            this.query.current = pageNo;
            this.queryPage();
        },
        deliverGoods (rowData) {
            // 发货
            orderDeliverGoods({id:rowData.id}).then((res)=>{
                this.$message.success("发货成功");
            });
        },
        queryPage () {
            queryOrderPage(this.query).then((res)=>{
                this.page.list = res.data.records;
                this.query.size = res.data.size;
                this.page.count = res.data.total;
            });
        },
        reset() {
            // 重置
            this.query.orderCode = null;
            this.query.receiverName = null;
            this.query.receiverTel = null;
            this.query.payStatus = null;
            this.query.orderStatus = null;
            this.query.daterangeArr = [];
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.queryPage();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
}
</script>

<style scoped>

</style>